// uno.config.ts
import { defineConfig, presetAttributify, presetIcons, presetUno } from 'unocss'

export default defineConfig({
    // 1. 预设配置（必选）
    presets: [
        presetUno(), // 基础样式（类似Tailwind）
        presetAttributify(), // 支持属性写法：<div text-red-500>
        presetIcons({ // 图标系统配置
            scale: 1.2, // 图标默认放大1.2倍
            warn: true, // 图标缺失时显示警告
            extraProperties: { // 给所有图标添加的CSS
                'display': 'inline-block',
                'vertical-align': 'middle',
            }
        })
    ],

    // 2. 主题配置（重要）
    theme: {
        colors: { // 扩展颜色
            primary: '#0097FF', // 饿了么主题蓝
            'blue-600': '#0097FF', // 覆盖默认蓝色
            'gray-500': '#888',   // 覆盖默认灰色
        },
        spacing: { // 自定义间距（适配vw单位）
            '3.5': '3.5vw',
            '4.5': '4.5vw',
            '12': '12vw',
            '14': '14vw',
            '18': '18vw',
            // 添加更多页面用到的vw单位...
        }
    },

    // 3. 自定义规则（按需添加）
    rules: [
        // 示例：创建自定义vw字体大小
        [/^text-(\d+\.?\d*)vw$/, ([_, num]) => ({ 'font-size': `${num}vw` })],
        // 示例：创建自定义圆角
        ['rounded-sm', { 'border-radius': '2px' }]
    ],

    // 4. 快捷方式（推荐）
    shortcuts: {
        // 商家卡片样式
        'shop-card': 'p-2.5 border-b border-gray-300 flex cursor-pointer',
        // 评分星星容器
        'rating-stars': 'flex items-center text-yellow-400',
        // 促销标签
        'promo-tag': 'w-4 h-4 rounded text-white flex justify-center items-center text-3'
    },

    // 5. 安全配置（可选）
    safelist: [
        // 确保动态生成的图标类能被识别
        'i-mdi-chevron-down',
        'i-mdi-magnify',
        'i-mdi-star',
        'i-mdi-filter'
    ]
})